<template>
	<view>
		<view v-if="inPorcessOrderId != null" class="order-process" @click="toOrder">您有进行中的订单,点击查看</view>
		
		<map id="map" :longitude="from.longitude" :latitude="from.latitude" :style="contentStyle" scale="15" :enable-traffic="false" :show-location="true" :enable-poi="true" class="map">
			<cover-image class="location" src="../../static/workbench/location.png" @tap="toLocationHandle()"></cover-image>
		</map>
		<view class="panel">
			<view class="from" @tap="chooseLocationHandle('from')">
				<text>{{ from.address }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to" @tap="chooseLocationHandle('to')">
				<text>{{ to.address }}</text>
			</view>
			<button class="btn" @tap="toCreateOrderHandle">查看路线</button>
		</view>
	</view>
</template>

<script>
	
import GtPush from '../../lib/gtpush-min.js'
	//地图点选插件
const chooseLocation = requirePlugin('chooseLocation');
let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
let qqmapsdk ;

export default {
	data() {
		return {
			//开始位置
			from: {
				address: '输入你的开始位置',
				longitude: 0,
				latitude: 0
			},
			//结束位置
			to: {
				address: '输入你的目的地', 
				longitude: 0,
				latitude: 0
			},
			
			//窗口样式
			contentStyle: '',
			windowHeight: 0,
			//地图对象
			map: null,
			//标记:开始位置点选或者结束位置点选
			chooseFromOrToflag: null,
			inPorcessOrderId:null,
			chooseType:"",
		};
	},
	methods: {
    initMap(){
      //得到当前经纬度
      this.getLocation();

      this.initStyle();
      //创建地图
      this.map = uni.createMapContext("map",this);
    },
    getLocation(){
      var _this = this;
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          _this.from.latitude = res.latitude
          _this.from.longitude = res.longitude
          _this.load(res.latitude,res.longitude)
        }
      });
    },
    //初始化窗口样式
    initStyle(){
      let _this = this;
      //处理窗口样式
      let windowHeight = uni.getSystemInfoSync().windowHeight;
      _this.windowHeight = windowHeight;
      _this.contentStyle = `height:${_this.windowHeight}px;`;
    },
    //回到当前位置
    toLocationHandle(){
      var _this = this;
      _this.getLocation();
      this.map.moveToLocation({
        longitude:_this.longitude,
        latitude:_this.latitude
      })
    },
    chooseLocationHandle(type){
      let _this = this;
      //用来区分是开始位置，或者结束位子点选
      _this.chooseFromOrToflag = type;
      const key = _this.Consts.QQMAP_KEY; 	//使用在腾讯位置服务申请的key
      const referer = '飞驰专车'; 			//调用插件的app的名称
      const location = JSON.stringify({	//地图中心位置，可以不指定
        latitude: _this.from.latitude,
        longitude: _this.from.longitude
      });
      const category = '生活服务,娱乐休闲';	//分类，可以不指定
      //跳转到地图点选页面
      wx.navigateTo({
        url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
      });
    },
    chooseLocationCallback(location){
      if(!location || !location.address)return;
      let _this = this;
      //给开始或结束位置赋值
      if(_this.chooseFromOrToflag == "from"){
        //开始位置点选
        _this.from.address = location.name;
        _this.from.latitude = location.latitude;
        _this.from.longitude = location.longitude;
      }else{
        //结束位置点选
        _this.to.address = location.name;
        _this.to.latitude = location.latitude;
        _this.to.longitude = location.longitude;
      }
    },
    //加载当前位置
    load(latitude,longitude) {
      var _this = this;
      qqmapsdk.reverseGeocoder({
        location: latitude+0+','+longitude+0,
        success: function(res) {//成功后的回调
          var res = res.result;
          var mks = [];
          //当get_poi为0时或者为不填默认值时，检索目标位置，按需使用
          mks.push({ // 获取返回结果，放到mks数组中
            title: res.address,
            id: 0,
            latitude: res.location.lat,
            longitude: res.location.lng,
            iconPath: './resources/placeholder.png',//图标路径
            width: 20,
            height: 20,
            callout: { //在markers上展示地址名称，根据需求是否需要
              content: res.address,
              color: '#000',
              display: 'ALWAYS'
            }
          });
          // 当前地址
          _this.from.address = res.address
        },
        fail: function(error) {
          // console.error(error);
        },
        complete: function(res) {
          // console.log(res);
        }
      })
    },
    //去下单的界面
    toCreateOrderHandle(){
      let _this = this;
      //去下一个界面之前 判断起点和终点的坐标
      if(_this.from.latitude == 0 || _this.to.latitude == 0){
        uni.showToast({
          title:"请完善位置信息",icon:"error"
        })
        return;
      }
      //把选好的位置信息传递到订单页
      let orderLocation = {
        from:_this.from,
        to:_this.to
      }
      uni.setStorageSync("from",_this.from);
      uni.setStorageSync("to",_this.to);
      uni.navigateTo({
        url:"/pages/create_order/create_order"
      })
    }

	},
	onShow: function() {
    this.chooseLocationCallback(chooseLocation.getLocation())
	},
	onHide: function() {
	},
	onLoad: function() {
		let _this = this;
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: this.Consts.QQMAP_KEY
    });
	  _this.initMap();

	},
	onUnload: function() {
		
	}
};
</script>

<style lang="less">
@import url('workbench.less');
</style>
